<template>
	<div class="new-item" @click="toDetail">
		<div class="info">
			<img class="cover" :src="`/api/${data.cover_image}`" />
			<div class="right">
				<div class="title">{{ data.title }}</div>
				<div class="desc">{{ desc }}</div>

			</div>
		</div>
		<div class="footer">
			<StatItem icon="Timer" :value="formatTime"/>
			<div style="display: flex; align-items: center;">
				<StatItem icon="View" :value="data.view_count" style="margin-right: 20px;"/>
				<StatItem icon="Star" :value="likeData ? likeData.like_count : data.like_count" @click.stop="likeNews"/>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { defineProps, computed } from 'vue'
import StatItem from "./StatItem.vue";
import dayjs from 'dayjs'
import { like } from '/@/api/news'
import { ElMessage } from "element-plus";
import {useRouter} from 'vue-router'
const router = useRouter()

const likeData = ref(null)
const likeNews = async () => {
	const res = await like(props.data.id)
	const msg = res.data.liked ? '点赞' : '取消点赞'
	ElMessage.success(msg)
	likeData.value = res.data
}

// 使用计算属性获取当前时间戳
const currentTime = computed(() => {
	return Date.now()
})
const desc = computed(() => {
	const pattern = /<\/?[^>]+>/g;
	return props.data.content.replace(pattern, '')
})

const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	}
})

const formatTime = computed(()=> {
	return dayjs(props.data.publish_time).format('YYYY-MM-DD HH:mm:ss')
})

const toDetail = ()=> {
	// const url = router.resolve({
	// 	path: `/news-detail/${props.data.id}`
	// }).href;
	// window.open(url, '_blank');
	router.push({
		path: `/news-detail/${props.data.id}`
	})
}
</script>

<style lang="scss" scoped>
.new-item {
	width: 100%;
	height: 240px;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.07);
	transition: box-shadow 0.3s ease;
	border-radius: 14px;
	overflow: hidden;
	&:hover {
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 12px 30px rgba(0, 0, 0, 0.12);
	}
	padding: 8px;
	display: flex;
	flex-direction: column;
	.info {
		display: flex;
		height: 180px;
		flex: 1;
		.cover {
			width: 180px;
			height: 180px;
			border-radius: 14px;
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 8px;
			.title {
				width: 300px;
				font-size: 28px;
				font-weight: 600;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.desc {
				margin-top: 8px;
				display: -webkit-box;
				width: 300px;
				color: #909399;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 6;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>
